<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <link rel="stylesheet" href="./main.css">
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-side-navigation>
		<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
		<ui5-side-navigation-group text="Group 1" expanded>
			<ui5-side-navigation-item text="People" expanded icon="group">
				<ui5-side-navigation-sub-item text="From My Team"></ui5-side-navigation-sub-item>
				<ui5-side-navigation-sub-item text="From Other Teams"></ui5-side-navigation-sub-item>
			</ui5-side-navigation-item>
		</ui5-side-navigation-group>
		<ui5-side-navigation-group text="Group 2" expanded>
			<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
			<ui5-side-navigation-item text="Locations" disabled icon="locate-me"></ui5-side-navigation-item>
			<ui5-side-navigation-item text="Events" icon="calendar">
				<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
			</ui5-side-navigation-item>
		</ui5-side-navigation-group>
		<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link">
			<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-sub-item>
		</ui5-side-navigation-item>
		<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
		<ui5-side-navigation-item slot="fixedItems" text="External Link 1" icon="chain-link" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-item>
		<ui5-side-navigation-item slot="fixedItems" text="External Link 2" icon="chain-link" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-item>
    </ui5-side-navigation>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
